<template>
	<form @submit="formSubmit" class="rights_box">
		<view class="card">
			<view class="title_box3 wp">
				<text>会员板块</text>
			</view>
			<view class="dpflxr">
				<view class="checkbox dpflxr wp">
					<checkbox-group @change="choose(item.authValue)" v-if="item.type == 'hy'"
						v-for="(item, index) in auth_list">
						<label class="ckItem dpflxr">
							<checkbox :checked="item.isCheck" color="#F9600D" value="item.authValue"
								style="transform:scale(0.7); border-color: 2rpx #ccc solid;" />
							<text>{{ item.authName }}</text>
						</label>
					</checkbox-group>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="title_box3 wp">
				<text>员工板块</text>
			</view>
			<view class="dpflxr">
				<view class="checkbox dpflxr wp">
					<checkbox-group @change="choose(item.authValue)" v-if="item.type == 'yg'"
						v-for="(item, index) in auth_list">
						<label class="ckItem dpflxr">
							<checkbox :checked="item.isCheck" color="#F9600D" value="item.authValue"
								style="transform:scale(0.7); border-color: 2rpx #ccc solid;" />
							<text>{{ item.authName }}</text>
						</label>
					</checkbox-group>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="title_box3 wp">
				<text>交易板块</text>
			</view>
			<view class="dpflxr">
				<view class="checkbox dpflxr wp">
					<checkbox-group @change="choose(item.authValue)" v-if="item.type == 'jy'"
						v-for="(item, index) in auth_list">
						<label class="ckItem dpflxr">
							<checkbox :checked="item.isCheck" color="#F9600D" value="item.authValue"
								style="transform:scale(0.7); border-color: 2rpx #ccc solid;" />
							<text>{{ item.authName }}</text>
						</label>
					</checkbox-group>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="title_box3 wp">
				<text>商品模块</text>
			</view>
			<view class="dpflxr">
				<view class="checkbox dpflxr wp">
					<checkbox-group @change="choose(item.authValue)" v-if="item.type == 'sp'"
						v-for="(item, index) in auth_list">
						<label class="ckItem dpflxr" v-if="item.type == 'sp'" v-for="(item, index) in auth_list">
							<checkbox :checked="item.isCheck" color="#F9600D" value="item.authValue"
								style="transform:scale(0.7); border-color: 2rpx #ccc solid;" />
							<text>{{ item.authName }}</text>
						</label>
					</checkbox-group>
				</view>
			</view>
		</view>

		<button class="btn_box5" form-type="submit">保存</button>
	</form>
</template>

<script>
	import request from "@/api/index.js";

	export default {
		data() {
			return {
				id: 0,
				auth_list: [{
						authName: '会员查看',
						authValue: 'queryMember',
						type: 'hy',
						isCheck: false
					},
					{
						authName: '添加跟进记录',
						authValue: 'addFlow',
						type: 'hy',
						isCheck: false
					},
					{
						authName: '查看跟进记录',
						authValue: 'queryFlow',
						type: 'hy',
						isCheck: false
					},
					{
						authName: '权限设置',
						authValue: 'roleSet',
						type: 'yg',
						isCheck: false
					},
					{
						authName: '业绩查看',
						authValue: 'queryAchievement',
						type: 'yg',
						isCheck: false
					},
					{
						authName: '订单查看',
						authValue: 'queryOrder',
						type: 'jy',
						isCheck: false
					},
					{
						authName: '设置发货',
						authValue: 'deleveryOrder',
						type: 'jy',
						isCheck: false
					},
					{
						authName: '核销',
						authValue: 'writeOff',
						type: 'jy',
						isCheck: false
					},
					{
						authName: '表格导出',
						authValue: 'export',
						type: 'jy',
						isCheck: false
					},
					{
						authName: '营业统计',
						authValue: 'count',
						type: 'jy',
						isCheck: false
					},
					{
						authName: '查看',
						authValue: 'queryGoods',
						type: 'sp',
						isCheck: false
					}
				]
			}
		},

		onLoad(options) {
			var id = options.id;
			var auth_list = this.auth_list;

			if (id) {
				this.id = id;

				this.getAuth(data => {
					if (data.length > 0) {
						for (var i = 0; i < auth_list.length; i++) {
							for (var j = 0; j < data.length; j++) {
								if (auth_list[i].authValue == data[j].authValue) {
									auth_list[i].isCheck = true;
									break;
								}
							}
						}
					}

					this.auth_list = auth_list;
				})
			} else {
				uni.showToast({
					title: 'ID缺失',
					icon: 'none',
					mask: true
				})
				setTimeout(function() {
					uni.navigateBack()
				}, 500)
			}
		},

		methods: {
			getAuth: function(callback) {
				var id = this.id;
				var url = '/shop/store-api/' + uni.getStorageSync('shop_id') + '/frontEmployeeshopauth/' + id;

				request.http(url, 'GET').then(res => {
					var data = res.data;
					if (data.code == 0) {
						var data = data.data;
						callback(data);
					}
				})
			},

			choose: function(authValue) {
				var auth_list = this.auth_list;
				
				for(var i = 0; i < auth_list.length; i++){
					if(auth_list[i].authValue == authValue){
						auth_list[i].isCheck = !auth_list[i].isCheck;
						break;
					}
				}
				
				this.auth_list = auth_list;
			},

			formSubmit: function(e) {
				var employeeId = this.id;
				var auth_list = this.auth_list;
				var auths = '';

				auth_list.forEach(function(val) {
					if (val.isCheck) {
						if (auths == '') {
							auths = val.authValue;
						} else {
							auths += ',' + val.authValue;
						}
					}
				})

				var data = {
					employeeId: employeeId,
					auths: auths
				}

				request.http('/shop/store-api/' + uni.getStorageSync('shop_id') + '/frontEmployeeshopauth', 'POST',
					data, '保存中...').then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						})

						setTimeout(function() {
							uni.navigateBack();
						}, 500)
					} else {
						uni.showToast({
							title: '保存失败',
							icon: 'none'
						})
					}
				})
			},
		},
	}
</script>

<style src="../../static/css/app.css"></style>
<style>
	page {
		padding-bottom: 140rpx;
	}

	.title_box3 {
		font-size: 28rpx;
		font-weight: bold;
		border-bottom: 1rpx #eee solid;
	}

	.checkbox {
		padding: 36rpx 24rpx;
	}

	.checkbox .ckItem {
		margin-right: 80rpx;
	}
</style>
